<!-- 协议 -->
<template>
  <view class="container">
    <!-- 协议内容区域 -->
    <view class="agreement-card">
      <view class="agreement-title">
        <span v-if="newregType == 0">用户协议</span>
        <span v-if="newregType == 1">企业协议</span>
      </view>
      <u-parse :content="content"></u-parse>
    </view>

    <!-- 协议勾选区域 -->
    <view class="agreement-check">
      <u-checkbox-group
        v-model="checkboxValue1"
        placement="column"
        @change="checkboxChange"
      >
        <u-checkbox
          :customStyle="{ marginBottom: '8px' }"
          :label="
            countDown > 0
              ? `我已阅读并同意用户协议(${countDown}秒后可点击)`
              : '我已阅读并同意用户协议'
          "
          :disabled="isDisabled"
          name="1"
        >
        </u-checkbox>
      </u-checkbox-group>
    </view>

    <!-- 操作按钮 -->
    <view class="action-button">
      <u-button
        type="primary"
        :disabled="!isChecked"
        text="继续申请"
        shape="circle"
        :custom-style="{ height: '44px', fontSize: '16px' }"
        @click="jixu"
      ></u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { showModalNoCancel } from "../../utils/toast";
import { onLoad } from "@dcloudio/uni-app";
import { getRegisterPerson, getRegisterCompany } from "@/api/userInfo.js";

const { proxy } = getCurrentInstance();
const newregType = ref();
onLoad(async (e) => {
  newregType.value = e.type;
  try {
    if (e.type == 1) {
      const res = await getRegisterCompany();
      content.value = res.data;
    } else {
      const res = await getRegisterPerson();
      content.value = res.data;
    }
  } catch (error) {}
});

// 协议内容
const content = ref();

// 复选框相关状态
const checkboxValue1 = ref([]); // 用于u-checkbox-group的双向绑定
const isDisabled = ref(true); // 初始禁用（核心修正：5秒内不可选）
const countDown = ref(5); // 倒计时秒数
const isChecked = ref(false); // 记录是否勾选（控制按钮状态）

// 页面加载时启动倒计时
onMounted(async () => {
  initial();
  const timer = setInterval(() => {
    countDown.value--;
    if (countDown.value <= 0) {
      clearInterval(timer);
      isDisabled.value = false; // 倒计时结束，允许勾选
    }
  }, 1000);
});

// 复选框勾选事件（修正逻辑）
const checkboxChange = (e) => {
  // 勾选状态更新
  isChecked.value = e.length > 0;
};

// 继续申请按钮事件
const jixu = () => {
  uni.navigateTo({
    url: `/pages/newsreg/newsreg?type=${newregType.value}`,
  });
};

// 初始化检查登录状态
const initial = () => {
  proxy.$http({
    url: "WechatUser/checkLogin",
  });
};
</script>

<style lang="scss">
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  background-color: #f7f7f7;
}

.agreement-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.agreement-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
  text-align: center;
}

.agreement-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.agreement-check {
  display: flex;
  flex-direction: column; /* 垂直布局，方便显示倒计时提示 */
  margin-bottom: 30px;
  padding: 0 10px;

  .check-text {
    margin-left: 10px;
    font-size: 14px;
    color: #333;
  }
}

.action-button {
  margin-top: auto;
  padding: 0 10px;
}
</style>
